import { ref } from 'vue'

// 创建一个全局响应式对象
const reactiveStorage = ref({})

/**
 * 判断字符串是否为有效的 JSON
 */
function isValidJSON(value: string): boolean {
	try {
		JSON.parse(value)
		return true
	} catch (error) {
		return false
	}
}

/**
 * 初始化响应式对象，将存储中的数据同步到 reactiveStorage
 */
function initializeStorage(storageType: Storage) {
	Object.keys(storageType).forEach((key) => {
		const value = storageType.getItem(key)
		if (value !== null) {
			// 如果是 JSON 字符串，解析后存入响应式对象；否则直接存原始值
			reactiveStorage.value[key] = isValidJSON(value)
				? JSON.parse(value)
				: value
		}
	})
}

/**
 * 辅助函数以减少代码重复
 */
function createReactiveStorageAPI(storageType: Storage) {
	// 初始化 reactiveStorage
	initializeStorage(storageType)

	return {
		// 存储
		set(key: string, value: any) {
			storageType.setItem(key, JSON.stringify(value)) // 存入 storage
			reactiveStorage.value[key] = value // 同步到响应式对象
		},
		// 取出数据，提供默认值处理
		get<T>(key: string, defaultValue?: T): T {
			const value = storageType.getItem(key)
			return value
				? isValidJSON(value)
					? JSON.parse(value)
					: (value as any)
				: defaultValue
		},
		// 删除数据
		remove(key: string) {
			storageType.removeItem(key) // 从存储中移除
			delete reactiveStorage.value[key] // 同步删除响应式对象中的值
		},
		// 获取响应式对象
		getReactive() {
			return reactiveStorage
		},
	}
}

/**
 * 封装操作 localStorage 本地存储的方法
 */
export const lStorage = createReactiveStorageAPI(localStorage)

/**
 * 封装操作 sessionStorage 本地存储的方法
 */
export const sStorage = createReactiveStorageAPI(sessionStorage)
